// 这个组件是前台 最上方 的固定导航栏
<template>
  <div>
    <el-row
      style="
        margin-top: 30px;
        border-left: #5c5c5c 2px solid;
        border-right: #5c5c5c 2px solid;
        border-top: #5c5c5c 2px solid;
      "
    >
      <!--          左边列-->
      <el-col :span="4">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">
            <img
              src="../../assets/logo.png"
              style="height: 20px; width: auto"
            />
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的阅淘</template>
            <el-menu-item index="2-1" @click="goOrderDetail"
              >我的订单</el-menu-item
            >
            <el-menu-item index="2-2" @click="goUserCart">购物车</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">设置</template>
              <el-menu-item index="2-4-1" @click="goUserInfo"
                >个人信息</el-menu-item
              >
              <el-menu-item index="2-4-2" @click="goAddressManage"
                >地址管理</el-menu-item
              >
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-col>

      <!--目录列-->
      <el-col :span="7" style="margin-left: 500px">
        <el-row
          :gutter="20"
          justify="space-around"
          style="padding-top: 18px; text-align: center"
        >
          <el-col
            v-for="catalogue in catalogues"
            :key="catalogue.catalogueId"
            :xs="4"
            :sm="4"
            :md="4"
            :lg="4"
            :xl="4"
          >
            <el-link
              type="info"
              @click="goCatalogue(catalogue.catalogueId)"
              style="color: #a52a2a; font-weight: bold"
            >
              {{ catalogue.catalogueName }}
            </el-link>
          </el-col>
        </el-row>
      </el-col>

      <!--          右边列-->
      <el-col :span="5" style="background: orange">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          style="padding-left: 30px"
        >
          <el-menu-item index="4" v-if="userId === -1">
            <el-button>
              <router-link to="/login">登录</router-link>
            </el-button>
            <el-button>
              <router-link to="/register">注册</router-link>
            </el-button>
          </el-menu-item>
          <el-menu-item index="4" v-else>
            <el-avatar :size="52" :src="user.img"></el-avatar>

            <el-button
              size="mini"
              @click="modifyUserInfo"
              style="margin-left: 15px"
              >信息修改</el-button
            >
            <el-button @click="logOut" style="margin-right: 20px" size="mini"
              >注销</el-button
            >
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--    <div class="line"></div>-->
  </div>
</template>

<script>
import { jwtDecode } from "jwt-decode";
import axios from "axios";

export default {
  name: "Header",
  data() {
    return {
      userId: "",
      user: {
        nickname: "",
        img: "",
      },
      catalogues: [],
    };
  },
  mounted() {
    const token = localStorage.getItem("token");

    if (!token) {
      this.userId = -1;
    } else {
      // 解码 token，提取 userId
      try {
        const decoded = jwtDecode(token); // 使用新的jwtDecode进行解析
        this.userId = decoded.userId; // 获取 userId
        console.log("用户ID:", this.userId);

        // 请求用户信息
        axios
          .get("/user/findUserById", {
            params: { userId: this.userId },
            headers: {
              Authorization: `Bearer ${token}`, // 将 token 加入请求头
            },
          })
          .then((res) => {
            console.log(res.data);
            this.user.nickname = res.data.data.user.nickname;
            this.user.img = res.data.data.user.userImg;
          })
          .catch((error) => {
            console.log(error);
          });
      } catch (error) {
        console.error("Token 解码失败:", error);
      }
    }
    axios
      .get("/getCatalogue")
      .then((response) => {
        if (response.data.code === 200) {
          this.catalogues = response.data.data;
        } else {
          this.$message.error("获取分类信息失败");
        }
      })
      .catch((error) => {
        console.error("Error fetching catalogues:", error);
        this.$message.error("请求失败，请稍后重试");
      });
  },
  methods: {
    logOut() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    //获取请求参数

    modifyUserInfo() {
      this.$router.push("/user-about/user-detail");
      location.reload();
    },

    goOrderDetail() {
      this.$router.push({
        path: "/user-about/order",
      });
      location.reload();
    },
    goUserCart() {
      this.$router.push({
        path: "/user-about/cart",
      });
      location.reload();
    },
    goUserInfo() {
      this.$router.push("/user-about/user-detail");
      location.reload();
    },
    goAddressManage() {
      this.$router.push("/user-about/receipt-address");
      location.reload();
    },
    goCatalogue(catalogueId) {
      this.$router.push({
        path: "/catalogue",
        query: {
          catalogueId: catalogueId, // 将点击的目录 ID 作为查询参数传递
        },
      });
      location.reload();
    },
  },
};
</script>

<style>
.header-font {
  color: red;
  font-weight: bold;
}
</style>
